<template>
  <div>
    <!------------------------- 新增子属性 ------------------------------>
    <el-dialog :visible.sync="formVisible" width="516px" @close="childhandleCancel">
      <div slot="title" class="dialog-title">添加属性值</div>
      <el-form :ref="formName" :label-position="labelPosition" :model="formFieldsData" :rules="rules" label-width='110px'>
        <el-form-item label="属性值名称：" prop="value_name">
          <el-input v-model="formFieldsData.value_name" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="所属分类：">
          <el-input v-model="formFieldsData.attr_name" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="是否显示：">
          <el-radio :label="1" v-model="formFieldsData.is_show">是</el-radio>
          <el-radio :label="0" v-model="formFieldsData.is_show">否</el-radio>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="formFieldsData.sort" type='number' autocomplete="off" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="childhandleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="childhandleSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      labelPosition:'left',
      url:'/profession/admin/attrValue',
      id:'',
      formName:'childAttrAdd',
      formFieldsData: {
        value_name: '',
        attr_type:'',
        attr_name:'',
        parent_id:'',
        value_type:'',
        is_show:1,
        sort:0
      },
      // 验证规则
      rules: {
        value_name: [
          { required: true, message: '请输入属性值名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      formVisible:false
    }
  },
  methods: {
    // 显示子属性
    show(item,isEdit) {
      this.formFieldsData.parent_id = item.attr_id?item.parent_id:item.value_id
      this.formFieldsData.attr_type = item.attr_id || item.attr_type
      this.formFieldsData.attr_name = item.attr_name || item.value_name
      this.formVisible = true
      if (isEdit) {
        this.id = item.id
        this.formFieldsData.value_name = item.value_name
        this.formFieldsData.is_show = item.is_show
        this.formFieldsData.sort = item.sort
      }
    },
    // 子属性弹框隐藏
    childhandleCancel() {
      this.formVisible = false
      Object.keys(this.formFieldsData).forEach((k) => {
        this.formFieldsData[k] = ''
      })
    },
    // 子属性表单提交
    childhandleSubmit() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          if (!this.id) {
            this.$http.post(this.url, this.formFieldsData).then(response => {
              this.handleResponse(response)
            })
          } else {
            this.$http.put(this.url + '/' + this.id, this.formFieldsData).then(response => {
              this.handleResponse(response)
            })
          }
        } else {
          return false
        }
      })
    },
    // 提交回调
    handleResponse(response){
      if (response.code === 10000) {
        this.$message.success(response.message)
        this.$emit('addSuccess')
        // 成功后
        this.id = null
        this.childhandleCancel()
      } else {
        this.$message.error(response.message)
      }
    }
  }
}
</script>